<?php if (!defined('THINK_PATH')) exit();?><!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="http://api.chinaola.net/ola/Application/Test/Public/css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="http://api.chinaola.net/ola/Application/Test/Public/css/base.css" />
    <link rel="stylesheet" type="text/css" href="http://api.chinaola.net/ola/Application/Test/Public/css/iconfont_price.css" />
    <style type="text/css">
        .order {
            margin: 0;
        }

        .order img {
            max-width: 78px;
            height: 71px;
        }

        #stauts {
            width: 100%;
            background: #FFFFFF;
            text-align: right;
            padding: 10px;
            color: #FF0000;
        }

        .mui-card-footer {
            padding: 0;
        }
        .mui-table-view{
            background-color: #efeff4;
            position: initial;
        }

        /* 整体 */
        .container{
            margin-top:45px;
        }

        /* 导航 */
        .price_top_img img{
            width:100%;
            height:100%;
        }
        .iconfont_price{
            font-size:20px;
        }
        .price_top_nav{
            display: -moz-box;
            display: -webkit-box;
            padding:0 5px;
        }
        .price_top_nav_box{
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-box-flex: 1;
            box-flex: 1;
            text-align:center;
            font-size:10px;
            padding:10px 0;
        }
        .price_top_nav_box div{
            color:#8f8f94;
        }
        .price_top_nav_box i{
            width:100%;
            color: #ff8fc0;
            display:block;
        }
        .price_top{
            background: #ffffff;
        }

        .price_content{
            margin-top:10px;
            background: #ffffff;
        }
        .price_content_title{
            display: -moz-box;
            display: -webkit-box;
            position:relative;
            border-bottom:1px solid #CCCCCC;
        }
        .price_content_title .price_nav{
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-box-flex: 1;
            box-flex: 1;
            display:block;
            text-align:center;
            width:100%;
            height:40px;
            line-height:40px;
            font-size:12px;
            margin:0 auto;
            color:#8f8f94;
        }
        .price_content_title .fenge{
            position:absolute;
            width:1px;
            background: #CCCCCC;
            height:75%;
            top:50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .price_content_title .server_active{
            color:#000;
        }
        .price_nav span{
            display:block;
            width:100%;
            height:100%;
            position:relative;
        }
        .server_active span:after{
            position:absolute;
            content:'';
            display:block;
            width:60%;
            height:2px;
            background: #ffb4db;
            bottom:-1px;
            left:20%;
        }
        .price_title{

        }
        .price_title h2{
            font-size:20px;
            font-weight:normal;
            width:100%;
            color:#ffaf7e;
            text-align: center;
            margin:20px auto;
            position:relative;
        }
        .price_title h2 span {
            position: relative;
        }
        .price_title h2 span:before{
            content:'';
            display:block;
            width:25px;
            height:25px;
            position:absolute;
            left:-35px;
            top:50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .h2_one,.h2_two,.h2_three{
            text-indent:35px;
        }
        .h2_one span:before{
            background: url("http://api.chinaola.net/ola/Application/Test/Public/images/shangmen_yiyuan@2x_03.png") center center;
            -webkit-background-size:100% 100%;
            background-size:100% 100%;
        }
        .h2_two span:before{
            background: url("http://api.chinaola.net/ola/Application/Test/Public/images/shangmen_jujia@2x_03.png") center center;
            -webkit-background-size:100% 100%;
            background-size:100% 100%;
        }
        .h2_three span:before{
            background: url("http://api.chinaola.net/ola/Application/Test/Public/images/shangmen_lvyou@2x_03.png") center center;
            -webkit-background-size:100% 100%;
            background-size:100% 100%;
        }
        .price_title p{
            margin:0;
            font-size:11px;
            text-align: center;
            background: #ffb4db;
            color:#fff;
            -webkit-border-radius:6px;
            -moz-border-radius:6px;
            border-radius:6px;
            padding:0 8px;
        }
        .price_content_content{
            padding:0 15px 40px 15px;
            display:none;
        }
        .price_content_content img{
            width:100%;
        }
        .price_table_content{
            display:none;
        }
        .price_content_container{

        }
        .price_content_container h3{
            font-size:16px;
            font-weight:normal;
            display:inline-block;
            color:#ffaf7e;
            padding:4px 8px;
            border-radius:3px;
            position:relative;
            margin:10px 0;
        }
        .price_content_container h3:before{
            position:absolute;
            content:'';
            display:block;
            width:5px;
            height:5px;
            left:-3px;
            top:50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            border-radius:100%;
            background: #ffaf7e;
        }
        .price_content_container p{
            color:#8f8f94;
            margin-bottom:5px;
            font-size:11px;
        }

        .price_content_price{
            position:fixed;
            bottom:0;
            left:0;
            background: #ffb4db;
            width:100%;
            height:50px;
            line-height:50px;
            text-align: center;
            color: #ffffff;
        }
        table{
            font-size:10px;
            width:100%;
            border:1px solid #666;
        }
        table tr{
            text-align:center;
        }
        table td{
            padding:15px 3px;
        }
        table tr:nth-child(1){
            background: #d6e0ea;
        }
        table th{
            font-weight:normal;
        }
        .price_table_container{
            margin-bottom:15px;
        }
        .content_active{
            display:block;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 id="title" class="mui-title">上门护理</h1>
</header>
<div class="container">
    <div class="price_top">
        <div class="price_top_img" onclick="phone();">
            <img src="http://api.chinaola.net/ola/Application/Test/Public/images/price_content.png" alt="">
        </div>
        <div class="price_top_nav">
            <div class="price_top_nav_box">
                <i class="icon iconfont_price icon-shimingrenzheng"></i>
                <div class="name">实名认证</div>
            </div>
            <div class="price_top_nav_box">
                <i class="icon iconfont_price icon-jiankangzhengming"></i>
                <div class="jiankang">健康证明</div>
            </div>
            <div class="price_top_nav_box">
                <i class="icon iconfont_price icon-icon"></i>
                <div class="peixun">专业培训</div>
            </div>
            <div class="price_top_nav_box">
                <i class="icon iconfont_price icon-iconfontshexiangtou"></i>
                <div class="jiankong">全程监控</div>
            </div>
            <div class="price_top_nav_box">
                <i class="icon iconfont_price icon-shimingrenzheng"></i>
                <div class="baozhang">售后保障</div>
            </div>
        </div>
    </div>
    <div class="price_content">
        <div class="price_content_title">
            <div class="price_nav"><span class="yiyuan_server">医院护理</span></div>
            <div class="fenge"></div>
            <div class="price_nav"><span class="jujia_server">居家养老护理</span></div>
            <div class="fenge"></div>
            <div class="price_nav server_active"><span class="lvyou_server">旅游护理</span></div>
        </div>
        <div class="price_content_content">         <!--医院护理-->
            <img src="http://api.chinaola.net/ola/Application/Test/Public/images/lADOlBXp6s0N3s0G1g_1750_3550.jpg" alt="">
        </div>
        <div class="price_content_content">         <!--居家养老护理-->
            <img src="http://api.chinaola.net/ola/Application/Test/Public/images/lADOlBXqQM0QzM0G1g_1750_4300.jpg" alt="">
        </div>
        <div class="price_content_content content_active">         <!--旅游护理-->
            <img src="http://api.chinaola.net/ola/Application/Test/Public/images/lADOlBXpns0NVM0G1g_1750_3412.jpg" alt="">
        </div>
        <!--<div class="price_content_price" id="goyuyue">立即预约</div>-->
    </div>
</div>

<script src="http://api.chinaola.net/ola/Application/Test/Public/js/mui.min.js"></script>
<script src="http://api.chinaola.net/ola/Application/Test/Public/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="http://api.chinaola.net/ola/Application/Test/Public/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://api.chinaola.net/ola/Application/Test/Public/js/storage.js" type="text/javascript" charset="utf-8"></script>
<script src="http://api.chinaola.net/ola/Application/Test/Public/js/server.js" type="text/javascript" charset="utf-8"></script>
<script>
    mui.init();
    var token;
    mui.plusReady(function(){
        token= lget('token');
    });

    //点击toggle
    $(".price_nav").click(function(){

        $(".price_nav").removeClass('server_active');
        $(this).addClass('server_active');
        $(".price_content_content").removeClass("content_active");
        if($(this).index() == 0){
            $(".price_content_content:nth-child(2)").addClass("content_active");
        }else if($(this).index() == 2){
            $(".price_content_content:nth-child(3)").addClass("content_active");
        }else{
            $(".price_content_content:nth-child(4)").addClass("content_active");
        }

    });
    //    document.getElementById("goyuyue").addEventListener("tap",function(){
    //        if(token == "" || token == 'null' ||token == null) {
    //            mui.toast("未登录,请在个人中心登录");
    //        }else{
    //            clicked('sub_order_confirm.html');
    //        }
    //    });

    //拨打电话
    function phone(){
        var a = [{
            title: "咨询客服"
        }];
        plus.nativeUI.actionSheet({
            cancel: "取消",
            buttons: a
        }, function (b) { /*actionSheet 按钮点击事件*/
            switch (b.index) {
                case 0:
                    break;
                case 1:
                    plus.device.dial("400-175-1750", false);
                    break;
                default:
                    break;
            }
        });
    }

</script>
</body>

</html>